<template>
  <div id="app" class="h-screen flex flex-col">
    <header class="bg-primary-500 text-white p-4 shadow-md">
      <h1 class="text-xl font-bold">Vue Form Designer</h1>
    </header>
    
    <main class="flex-1 flex">
      <!-- 左侧物料面板 -->
      <MaterialPanel class="w-80 border-r" />
      
      <!-- 中间设计区域 -->
      <DesignArea class="flex-1" />
      
      <!-- 右侧面板组 -->
      <div class="w-80 border-l flex flex-col">
        <el-tabs v-model="activeTab" class="flex-1" type="border-card">
          <el-tab-pane label="属性编辑" name="properties">
            <PropertyPanel />
          </el-tab-pane>
          <el-tab-pane label="数据源" name="datasource">
            <DataSourcePanel />
          </el-tab-pane>
          <el-tab-pane label="JSON Schema" name="schema">
            <SchemaPanel />
          </el-tab-pane>
        </el-tabs>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import MaterialPanel from './components/MaterialPanel.vue'
import DesignArea from './components/DesignArea.vue'
import PropertyPanel from './components/PropertyPanel.vue'
import DataSourcePanel from './components/DataSourcePanel.vue'
import SchemaPanel from './components/SchemaPanel.vue'

const activeTab = ref('properties')
</script>

<style>
#app {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
</style>